<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>消息列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="el-card-button">
                <el-button type="primary" size="small" @click="addServer">发送消息</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <!--                <el-table-column-->
                <!--                        prop="group_id"-->
                <!--                        label="用户">-->
                <!--                </el-table-column>-->
                <el-table-column
                        type="index"
                        label="#">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="summary"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'400':''"
                        label="摘要">
                </el-table-column>
                <el-table-column
                        prop="content"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'400':''"
                        label="内容">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'100':''"
                        label="发送时间">
                </el-table-column>
                <!--                <el-table-column-->
                <!--                        prop="url"-->
                <!--                        label="发送路径">-->
                <!--                </el-table-column>-->
            </el-table>

            <el-pagination
                    background
                    @size-change="changeSize"
                    @current-change="changeCurrent"
                    :current-page="params.pagenum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="params.pagesize"
                    :layout="this.$store.state.paginationLayout"
                    :total="params.totals">
            </el-pagination>
        </el-card>
        <el-dialog title="发送消息" :width="this.$store.state.dialogWidth" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="标题">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="摘要">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2}"
                                    placeholder="请输入摘要"
                                    v-model="form.summary">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="内容">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 6}"
                                    placeholder="请输入内容"
                                    v-model="form.text">
                            </el-input>
                        </el-form-item>
                        <!--                        <el-form-item label="消息路径">-->
                        <!--                            <el-input v-model="form.url"></el-input>-->
                        <!--                        </el-form-item>-->
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible=false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "Message_Mass",
    data() {
      return {
        form: {
          title: "",
          summary: '',
          text: '',
          url: ''
        },
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0
        },
        tableData: [],
        visible: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
        };
        this.$axios.post("admin/system_message/index", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      addServer() {
        this.form = {
          title: "",
          summary: '',
          text: '',
          url: ''
        };
        this.visible = true
      },
      dialogAffirm() {
        this.$axios.post("admin/system_message/send", this.form).then((res) => {
          this.$message.success("成功");
          this.visible = false;
          this.getList();
        });
      }
    }
  }
</script>

<style scoped>
    .agent_input {
        display: flex;
        align-items: center;
    }

    .agent_center {
        margin: 0 20px;
    }


</style>